<template>
  <div class="pd-30" >
    <el-table :data="tableData" :row-class-name="tableRowClassName" class="w-full">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="反馈内容：">
              <span>{{ props.row.content }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
          prop="id"
          label="id"
          width="55"
      >
      </el-table-column>
      <el-table-column
          prop="type"
          label="类别"
      >
      </el-table-column>
      <el-table-column
          label="反馈时间"
      >
        <template v-slot="{row}">
          {{ $dayjs(row.feedback_time * 1).format('YYYY-MM-DD hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="反馈者"
      >
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>limit"
        :page-size="limit"
        :current-page.sync="pageNo"
    ></el-pagination>
    <!-- 分页器 end-->
  </div>
</template>

<script>
import {getFeedback} from "@/api/feedback";

export default {
  name: "Feedback",
  data() {
    return {
      tableData: [
        {id: '1', type: '意见反馈', content: '1111111sdasdasdasdasdsadsadasd11', feedback_time: Date.now() - 100, feedbacker: {id: 1, name: 'xxx'}},
        {id: '2', type: 'bug反馈', content: '222222222', feedback_time: Date.now() - 1000, feedbacker: {id: 1, name: 'xxx'}},
        {id: '3', type: '意见反馈', content: '333333333', feedback_time: Date.now() - 10000, feedbacker: {id: 1, name: 'xxx'}},
        {id: '4', type: '意见反馈', content: '444444444', feedback_time: Date.now() - 100000, feedbacker: {id: 1, name: 'xxx'}},
        {id: '5', type: '意见反馈', content: 'xxxxxxxxx', feedback_time: Date.now() - 1000000, feedbacker: {id: 1, name: 'xxx'}},
      ],
      pageNo:1,
      limit:10
    }
  },
  mounted() {
    this.getFeedback()
  },
  methods:{
    tableRowClassName({row}){
      if (row.type === 'bug反馈'){
        return 'warning-row';
      }
    },
    async getFeedback(){
      let result = await getFeedback({
        society_id:this.$store.getters.society_id,
        pageNo:this.pageNo,
        limit:this.limit
      })
      if(result.code === 200){
        this.tableData = result.feedback;
      }
    }
  },
  watch:{
    pageNo(){
      this.getAllArticleComment();
    }
  }
}
</script>

<style scoped lang="scss">

</style>

<style>
.el-table .warning-row {
  background: oldlace;
}
</style>